<template>
  <div style="height: 100%;width: 100%;">
    <!-- 遍历购物车中的商品 -->
    <div v-for="item in cartItems" :key="item.name" class="cart-item">
      <!-- 商品复选框 -->
      <van-checkbox v-model="item.check" class="cart-checkbox"/>
      <!-- 商品滑动单元格 -->
      <van-swipe-cell style="width: 100%;">
        <!-- 商品卡片 -->
        <van-card class="cart-card" :price="item.price" :desc="item.specification" :title="item.name"
          :thumb="item.img">
        <!-- 商品卡片底部 -->
        <template #footer>
          <!-- 商品数量选择器 -->
          <van-stepper v-model="item.quantity" @change="(newQuantity) => updateTotalPrice(item, newQuantity)" />
        </template>
        </van-card>
        <!-- 商品滑动单元格右侧 -->
        <template #right>
          <!-- 删除按钮 -->
          <van-button square text="删除" @click="removeItem(item)" type="danger" style="height: 100%;" />
        </template>
      </van-swipe-cell>
     
    </div>
  <div>
     <!-- 提交订单栏 -->
     <van-submit-bar :price="allPrice * 100" button-text="提交订单" @submit="onSubmit">
      <!-- 全选复选框 -->
      <van-checkbox v-model="checked">全选</van-checkbox>
      <!-- 提示信息 -->
      <template #tip>
        药品不支持7天无理由退换货。如有处方药,请凭处方单购买。
      </template>
    </van-submit-bar>
  </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { showToast } from 'vant';
import {useRouter} from 'vue-router'
const router = useRouter()


// 删除商品的处理函数
const removeItem = (item: { name: any; }) => {
  cartItems.value = cartItems.value.filter((cartItem: { name: any; }) => cartItem.name !== item.name);
  localStorage.setItem('cart', JSON.stringify(cartItems.value));
};


// 购物车商品列表
const cartItems = ref<any>([]);
// 全选复选框状态
const checked = computed({
  get() {
    return cartItems.value.every((item: { check: any; }) => item.check);
  },
  set(val) {
    cartItems.value.forEach((item: { check: any; }) => {
      item.check = val;
    });
    localStorage.setItem('cart', JSON.stringify(cartItems.value));
  }
});

// 更新总价的函数
const updateTotalPrice = (item: { name: any; }, newQuantity: any) => {
  const index = cartItems.value.findIndex((cartItem: { name: any; }) => cartItem.name === item.name);
  if (index !== -1) {
    cartItems.value[index].quantity = newQuantity; // 更新数量
    localStorage.setItem('cart', JSON.stringify(cartItems.value));
  }
  allPrice.value; // 触发计算总价
};

// 提交订单的处理函数
const onSubmit = () => {
  if (cartItems.value.some((item: { check: any; }) => item.check)) {
    // 有选中的商品，进行提交订单操作
    // showToast('提交订单成功');
    router.push('/order')
  } else {
    // 没有选中的商品，提示用户选择商品
    showToast('请选择商品');
  }
}

// 从 localStorage 读取购物车数据
onMounted(() => {
  const savedCart = JSON.parse(localStorage.getItem('cart')) || [];
  cartItems.value = savedCart;
});

// 计算总价
const allPrice = computed(() => {
  return cartItems.value
    .filter((item: { check: any; }) => item.check) // 只过滤选中的项
    .reduce((total: number, item: { quantity: number; price: number; }) => {
      return total + item.quantity * item.price; // 计算总价
    }, 0);
});
</script>

<style lang="scss" scoped>
.cart-item {
  display: flex;
  background-color: #f7f8fa;
  height: 150px;
  width: 100%;
}
.cart-checkbox{
  display: flex;
  width: 10%;
  margin-right: 10px;
}
</style>
